<!-- <!DOCTYPE html> -->
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<!-- 使用UTF-8 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<!-- 设置移动终端可视区域 -->
		<meta content="telephone=no" name="format-detection">
		<!-- 禁止iPhone等手机自动将数字变成可点击的拨号连接 -->
		<title>投诉总数列表</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<link href="css/weui.css" type="text/css" rel="stylesheet" />
	</head>
	<body style="background: #F6F6F6;">
		<div class="complaint" id="containerVue" v-cloak>
			<div class="headerView">
				<i onclick="closeView()">&#139;</i>
				<h1>"966588"查询系统</h1>
				<div></div>
				<div class="right" @click="choiceView">筛选</div>
			</div>
			<div class="choice_tip" v-if="choice">
				<div class="choice_view">
					<div class="choice">
						<div class="name">项目名称</div>
						<div class="text"><input type="text" v-model="param.projectName" /></div>
					</div>
					<div class="choice">
						<div class="name">投诉日期范围</div>
						<div class="text">
							<input type="text" style="width: 44%;" id="startTime" readonly/>
							<span style="float: left;vertical-align: middle;margin: .2rem .5rem;">~</span>
							<input type="text" style="width: 45%;" id="endTime" readonly/>
						</div>
					</div>
					<div class="choice_btn">
						<div class="btn_view" @click="choice = false">关闭</div>
						<div class="btn_view choice_btn_active" @click="search()">确定</div>
					</div>
				</div>
			</div>
			<div v-if="complaintList.length > 0">
				<div class="cont complaintList" v-for="item in complaintList">
					<div class="complaintText" style="padding-left: 0;">
						<div class="right" style="width: 100%;color: #333;font-size: .85rem;">{{item.projectName}}</div>
					</div>
					<div class="complaintText">
						<img src="image/icons_tsyj.png" alt="" class="icon">
						<div class="left">投诉意见</div>
						<div class="right">{{item.complaintReason}}</div>
					</div>
					<div class="complaintText" v-if="item.description != ''">
						<img src="image/icons_qkms.png" alt="" class="icon">
						<div class="left">情况描述</div>
						<div class="right">{{item.description}}</div>
					</div>
					<div class="complaintText">
						<img src="image/icons_tsr.png" alt="" class="icon">
						<div class="left">投诉人</div>
						<div class="right">{{item.createBy}}</div>
					</div>
					<div class="complaintText">
						<img src="image/icons_tsrq.png" alt="" class="icon">
						<div class="left">投诉日期</div>
						<div class="right">{{item.createTime}}</div>
					</div>
					<div class="isRead" v-if="item.isRead != 1">待处理</div>
					<div class="isRead" v-else style="background-color: seagreen;">已记录</div>
					<div class="isReadBtn" v-if="item.isRead != 1" @click="chickIsRead(item.id)">记录</div>
				</div>
			</div>
			<div v-else class="cont complaintList kong"><img src="image/kong.png" alt="">暂无投诉信息</div>
			<!-- loading 加载 -->
			<div style="opacity: 1;" v-if="loading">
				<div class="weui-mask_transparent"></div>
				<div class="weui-toast">
					<img src="image/load.gif" alt="" style="width: 2rem;margin: 2rem auto .5rem;">
					<p class="weui-toast__content">加载中</p>
				</div>
			</div>
		</div>
		<script src="script/jquery-3.5.js"></script>
		<script src="script/vue.js"></script>
		<script src="script/api.js"></script>
		<script src="script/ajax.js"></script>
		<script src="script/laydate/laydate.js"></script>
		<!-- <script src="../js/common/mui.min.js"></script> -->
		<!-- <script src="../js/common/openview.js"></script> -->
		<script>
			var app = new Vue({
				el: '#containerVue',
				data: {
					info: {}, // 详情信息
					param: {
						projectName: "",
						startDate: "",
						endDate: "",
						pageNo: 1,
						pageSize: 10
					},
					isEnd: false,
					isAjax: false,
					loading: false,
					complaintList: [],
					choice: false, // 筛选条件
				},
				created() {
					this.getList(true);
				},
				watch: {},
				methods: {
					chickIsRead(id) {
						var that = this;
						// 请求投诉详情信息
						ajaxHttp({
							url: 'jeecg-boot/node/nodeProjectComplaint/updateComplaintById',
							type: 'post',
							data: {id:id},
							success: function(res) {
								console.log(JSON.stringify(res));
								if (res.success) {
									$.Jsuccess('已记录');
									setTimeout(function(){
										that.param.pageNo = 1;
										that.isEnd = false;
										document.body.scrollTop = 0;
										that.getList(true);
									},3000)
								} else {
									$.Jwarning(res.message);
								}
							}
						})
					},
					// 筛选功能
					search() {
						var that = this;
						this.param.pageNo = 1;
						that.isEnd = false;
						document.body.scrollTop = 0;
						that.getList(true);
						this.choice = false;
					},
					// 日期筛选
					choiceView() {
						this.choice = true;
						this.param.projectName = "";
						this.param.startDate = "";
						this.param.endDate = "";
						setTimeout(function() {
							laydate.render({
								elem: "#startTime", //指定元素
								type: 'date',
								format: 'yyyy-MM-dd',
								trigger: 'click',
								showBottom: false,
								theme: '#0787d5',
								done: function(value, date, endDate) {
									app.param.startDate = value + " 00:00:00";
								}
							});
							laydate.render({
								elem: "#endTime", //指定元素
								type: 'date',
								format: 'yyyy-MM-dd',
								trigger: 'click',
								showBottom: false,
								theme: '#0787d5',
								done: function(value, date, endDate) {
									app.param.endDate = value + " 23:59:59";
								}
							});
						}, 5 * 100);
					},
					// 获取详情
					getList(selet_type) {
						var that = this;
						if (that.isEnd || that.isAjax) {
							return;
						}
						that.isAjax = true;
						// 请求投诉详情信息
						ajaxHttp({
							url: 'jeecg-boot/node/nodeProjectComplaint/getPageListByUser',
							type: 'post',
							data: that.param,
							beforeSend: function() {
								that.loading = true
							},
							success: function(res) {
								console.log(JSON.stringify(res));
								that.isAjax = false;
								if (res.success) {
									if (selet_type) {
										that.complaintList = res.result.records;
									} else {
										that.complaintList = that.complaintList.concat(res.result.records);
									}
									that.isEnd = res.result.pages == that.param.pageNo;
									++that.param.pageNo;
								} else {
									$.Jwarning(res.message);
									that.complaintList = [];
								}
							},
							complete: function() {
								that.loading = false
							}
						})
					}
				}
			})
			// 上拉触底事件
			var screenHeight = window.screen.height;
			window.onscroll = function() {
				if (screenHeight + document.body.scrollTop >= document.body.scrollHeight - 50) {
					app.getList(false)
				}
			}
		</script>
	</body>
</html>
